import React, { Component ,Fragment} from 'react';
import './style.css'
import TodoItem from './TodoItem'
import axios from 'axios'
import Test from './Test'
import { CSSTransition } from 'react-transition-group';
class App extends Component {
  constructor(props){
    super(props);
    this.state={
      inputValue:"",
      show:true,
      list:[]
    };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleDelClick = this.handleDelClick.bind(this);
    this.handleToggle = this.handleToggle.bind(this)
  }
  render() {
    return ( 
      <Fragment>
      <CSSTransition 
        in={this.state.show}
        timeout={1000}
        classNames='fade'
        unmountOnExit
        onEntered={(el)=>{el.style.color='blue'}}
        appear={true}
      >
        <div>
        <label htmlFor='inputId'>输入框</label>
        <input 
         
          id='inputId'
          value={this.state.inputValue}
          onChange={this.handleInputChange}/>
        <button onClick = {this.handleBtnClick}>提交</button>
        </div>
      </CSSTransition>
      <button onClick={this.handleToggle}>toggle</button>
      <ul >
        {
         this.getItem() 
        }
      </ul>
      <Test content={this.state.inputValue} />
      
      </Fragment>
    ); 
  }
  componentDidMount(){
    axios.get('/api/appList')
    .then((res)=>{
      console.log(res.data)
      this.setState(()=>({
        list:res.data
      }))
    })
    .catch((err)=>{
      alert(8787)
    })

    
  }
  handleToggle(){
    this.setState(()=>({
      show:!this.state.show
    }))
  }
  getItem (){
    
    return this.state.list.map((item,index)=>{
      return (
     
          <TodoItem key={index} content={item} index={index} deleteItem={this.handleDelClick}/> 
        
       
      )
    })
  }
  handleInputChange(e){
    const value = e.target.value
    this.setState(()=>({
      inputValue:value
    }))
  }
  handleBtnClick(){
     if(this.state.inputValue !== ""){
      this.setState((preState)=>({
          
        list:[...preState.list,preState.inputValue]
      }))
     }   
          
  }
  handleDelClick(index){
    const list = this.state.list;
    list.splice(index,1)
    this.setState({
      list:[...list]
    })
  }
}

export default App;
